<template>
  <div class="com_container">
    <div class="com_chart" ref="ref_map" @dblclick="backChina"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

import axios from 'axios'
import { getProvinceMapInfo } from '@/utils/map_utils.js'
export default {
  data() {
    return {
      echartInstance: null,
      allData: [],
      titleSize: 0,
      // 缓存省份第一次点击数据
      provienceData: {}
    }
  },
  computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme() {
      console.log('主题改变了')
      console.log(this.theme)

      this.echartInstance.dispose() // 销毁当前的图表
      this.initChart() // 重新以最新的主题名称初始化图表对象
      this.screenAdapter() // 完成屏幕的适配
      this.upData() // 更新图表的展示
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    async initChart() {
      this.echartInstance = this.$echarts.init(this.$refs.ref_map, this.theme)
      // 获取中国地图的矢量数据
      // http://localhost:8999/static/map/china.json
      // 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
      const res = await axios.get('http://localhost:3000/static/map/china.json')
      // console.log(res.data)
      this.$echarts.registerMap('china', res.data)
      const initOption = {
        title: {
          text: '▎ 商家分布',
          left: 20,
          top: 20
        },
        geo: {
          type: 'map',
          map: 'china',
          top: '10%',
          bottom: '10%',
          // 地图区域颜色及边框 水蓝色
          itemStyle: {
            areaColor: '#2E72BF',
            borderColor: '#333'
          }
        },
        legend: {
          left: '10%',
          bottom: '15%',
          orient: 'vertical'
        }
      }
      this.echartInstance.setOption(initOption)

      // 监听 点击省份事件
      this.echartInstance.on('click', async (arg) => {
        // console.log(arg)
        // 因为arg.name 为中文 需要转化 此时使用 map_utils文件
        const provinceInfo = getProvinceMapInfo(arg.name)
        console.log(provinceInfo)

        // 获取点击省份的数据
        // 判断当前所点击的这个省份的地图矢量数据在provienceData中是否存在
        if (!this.provienceData[provinceInfo.key]) {
          const res = await axios.get('http://localhost:3000' + provinceInfo.path)
          console.log(res.data)
          this.provienceData[provinceInfo.key] = res.data
          this.$echarts.registerMap(provinceInfo.key, res.data)
        }

        const clickOption = {
          geo: {
            map: provinceInfo.key
          }
        }
        this.echartInstance.setOption(clickOption)
      })
    },
    async getData() {
      const { data: res } = await this.$http.get('map')
      // console.log(res)
      this.allData = res
      this.upData()
    },
    upData() {
      const legendArr = this.allData.map((item) => {
        return item.name
      })
      // 处理地图数据
      const seriesArr = this.allData.map((item) => {
        return {
          // return的这个对象就代表的是一个类别下的所有散点数据
          // 如果想在地图中显示散点的数据, 我们需要给散点的图表增加一个配置, coordinateSystem:geo
          // 涟漪效果
          type: 'effectScatter',
          rippleEffect: {
            // 波纹秒数
            period: 2.5,
            // stroke(涟漪)和fill(扩散)，两种效果
            brushType: 'stroke',
            // 波纹范围
            scale: 5
          },
          // 协调系统：地理
          coordinateSystem: 'geo',
          name: item.name,
          data: item.children
        }
      })

      const dataOption = {
        series: seriesArr,
        legend: {
          data: legendArr
        }
      }
      this.echartInstance.setOption(dataOption)
    },
    screenAdapter() {
      this.titleSize = (this.$refs.ref_map.offsetWidth / 100) * 3.6
      const screenOption = {
        title: {
          textStyle: {
            fontSize: this.titleSize
          }
        },
        legend: {
          itemWidth: this.titleSize / 3,
          itemHeight: this.titleSize / 3,
          itemGap: this.titleSize / 3,
          textStyle: {
            fontSize: this.titleSize / 3
          }
        }
      }
      this.echartInstance.setOption(screenOption)
      this.echartInstance.resize()
    },
    backChina() {
      const backChinaOption = {
        geo: {
          map: 'china'
        }
      }
      this.echartInstance.setOption(backChinaOption)
    }
  }
}
</script>

<style lang="scss" scoped></style>
